<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="./inspinia/css/animate.css" />
    <link rel="stylesheet" href="./inspinia/css/style.css" />
    <style>
        body{font:14px "Microsoft Yahei",Verdana,Helvetica,Arial,sans-serif,"宋体";}
        body{background:white;}
        #wrap{position:relative;overflow-y:auto;}
        #mainSide{margin:0 300px 0 0;height:100%;border-color:#e7eaec;border-width:0 1px;border-style:solid;}
        #rightSide{position:absolute;width:300px;height:100%;right:0;top:0;}
        .chat-discussion{padding:0;}
        .chat-message{padding:5px 10px;}
        .message-content{text-align:left;}
        #tblChatDiscussion{padding-bottom: 10px;}
        .panel-body{border: 0 !important;padding: 5px !important;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="mainSide">
            <div id="flashContent"></div>
        </div>
        <div id="rightSide">
            <div class="ibox">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#tab-1">消息</a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" href="#tab-2">
                                人员列表
                                <span id="txtUsersCount" class="label label-warning">10</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body">
                                <div id="tblChatDiscussion" class="chat-discussion"></div>
                                <form id="formChat" class="form-chat m-t">
                                    <div class="input-group">
                                        <input type="text" name="msg" class="form-control" />
                                        <span class="input-group-btn">
                                            <button class="btn btn-primary" type="submit" title="发送"> <i class="fa fa-paper-plane"></i>
                                            </button>
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div id="tab-2" class="tab-pane">
                            <div class="panel-body">
                                <div class="chat-users">
                                    <div id="tblUsersList" class="users-list"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script id="tplUsersList" type="text/html">
      <%each list as user i%>
      <div class="chat-user">
        <span class="pull-right label label-primary">在线</span>
        <img class="chat-avatar" src="<%user.avatar%>" />
        <div class="chat-user-name">
          <a href="javascript:;"><%user.pname%></a>
        </div>
      </div>
      <%/each%>
    </script>
    <script id="tplChatDiscussion" type="text/html">
      <%if user.pid == msg.sender.pid%>
        <div class="chat-message left">
          <img class="message-avatar" src="<%user.avatar%>" title="<%user.pname%>" />
          <div class="message">
            <!--
            <a class="message-author" href="#"><%user.pname%></a>
            <span class="message-date"><%msg.time%></span>
            -->
            <span class="message-content"><%msg.content%></span>
          </div>
        </div>
      <%else%>
        <div class="chat-message right">
          <img class="message-avatar" src="<%msg.sender.avatar%>" title="<%msg.sender.pname%>" />
          <div class="message">
            <!--
            <a class="message-author" href="#"><%msg.sender.pname%></a>
            <span class="message-date"><%msg.time%></span>
            -->
            <span class="message-content"><%msg.content%></span>
          </div>
        </div>
      <%/if%>
    </script>
    <script src="./jquery/1.11.3/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./artTemplate/template.js"></script>
    <script src="./socket.io/socket.io.js"></script>
    <script src="./swfobject/swfobject.js"></script>
    <script>
        var omeetingDiv = document.getElementById('wrap');
        var resizeOmeetingDiv = function (){
            var h = window.innerHeight;
            $(omeetingDiv).css('height', h + 'px');
        };
        window.addEventListener('resize',function(){
            resizeOmeetingDiv();
        });

        var loadVideoPLayer = function(){
            var swfVersionStr = "20.0.0";
            var xiSwfUrlStr = "./swfobject/expressInstall.swf";
            var flashvars = {};
            flashvars.log = 'all';
            //1-发布视频，2-观看视频
            flashvars.type = '2';
            flashvars.streamUrl = 'rtmp://127.0.0.1:10087/encoder/iemaker2016';
            flashvars.streamName = 'iemaker-camera';
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "VideoPublishAndPlay";
            attributes.name = "VideoPublishAndPlay";
            attributes.align = "middle";
            swfobject.embedSWF(
                "./iemaker/VideoPublishAndPlay.swf", "flashContent",
                "100%", "100%",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes
            );
        };

        var socketioConnect = function(){
            var roomId = 'room-1';
            var socket = io('http://127.0.0.1:3000');
            var userData = {
                'pid': '2',
                'pname': 'Jack',
                'room': roomId,
                'avatar': './avatar/2.jpg'
            };
            socket.emit('userSignin', userData);

            socket.emit('getUsersList', roomId);
            socket.on('userSigninSuccess', function(data){
                socket.emit('getUsersList', roomId);
            });
            socket.on('userDisconnect', function(data){
                socket.emit('getUsersList', roomId);
            });

            socket.on('usersList', function(data){
                $("#txtUsersCount").html(data.length);
                $("#tblUsersList").html(template('tplUsersList', {"list":data}));
            });

            $("#formChat").on("submit", function(){
                if(this.msg.value == ''){
                    this.msg.focus();
                    return false;
                }
                var msgData = {'type':0, 'content':this.msg.value, 'to':''};
                socket.emit('sendChatMsg', msgData);
                this.reset();
                return false;
            });

            socket.on('getChatMsg', function(data){
                $("#tblChatDiscussion").append(template("tplChatDiscussion", {"user":userData, "msg":data}))
            });
        };

        $(function () {
            resizeOmeetingDiv();
            loadVideoPLayer();
            socketioConnect();
        });
    </script>
</body>
</html>
